<template>
	<view class="stationPage">
		<view class="scrollview">
			<getdatascrollview ref="getdatascrollview" :api="getdata">
				<template #default="{ list }">
					<u-navbar :autoBack="false">
						<template #left>
							<view></view>
						</template>
						<template #center>
							<view>
								<u-search :customStyle="{
                    width: '600rpx',
                  }" placeholder="搜索" v-model="searchstr" :showAction="false"
									@change="$u.debounce(searchchange, 500)"></u-search>
							</view>
						</template>
					</u-navbar>
					<view class="Stationaddbtn u-flex" @click="$z.gopage('/pages/Station/Stationadd')">
						<view class="iconfont iconjia1 mui-icon"></view>
						{{ $z.$t("添加站点") }}
					</view>
					<view class="SituationTJbox">
						<view class="title">{{ $z.$t("设备状况一览") }}</view>
						<view class="list">
							<view class="item">
								<view class="value">{{ SituationTJ.zx }}</view>
								<view class="label">{{ $z.$t("在线") }}</view>
							</view>
							<view class="item">
								<view class="value">{{ SituationTJ.lx }}</view>
								<view class="label">{{ $z.$t("离线") }}</view>
							</view>
							<view class="item">
								<view class="value">{{ SituationTJ.kx }}</view>
								<view class="label">{{ $z.$t("空闲") }}</view>
							</view>
							<view class="item nobefore">
								<view class="value">{{ SituationTJ.cd }}</view>
								<view class="label">{{ $z.$t("充电中") }}</view>
							</view>
						</view>
					</view>
					<view class="" v-for="(item, key) in list" :key="key">
						<stationitem :item="item" v-if="!item.gtel"></stationitem>
						<chargecaritem :item="item" v-else></chargecaritem>
					</view>
				</template>
			</getdatascrollview>
		</view>
		<view>
			<ztabbar></ztabbar>
		</view>
	</view>
</template>

<script>
	import stationitem from "./components/StationItem.vue";
	import chargecaritem from "./components/ChargeCaritem.vue";
	export default {
		components: {
			stationitem,
			chargecaritem,
		},
		data() {
			return {
				searchstr: "",
				SituationTJ: {},
				list: [],
				reqdata: [],
			};
		},
		mounted() {
			this.init();
		},
		methods: {
			async init() {
				uni.showLoading();
				let user = await this.$store.dispatch("user/getuser");
				let SituationTJ = await this.$z.request("/SituationTJ", {
					sum: 1,
					pcs1: user.pcs,
				});
				this.SituationTJ = SituationTJ[0];
				let StationPid = await this.$z.request("/StationPid", {
					pid: user.pcs,
				});
				StationPid.sort((a, b) => {
					if (a.sjc && b.sjc) {
						if (a.sjc == b.sjc) {
							return a.id - b.id;
						} else {
							var sj = this.$z.timefn.getUTCtime(a.sjc, b.sjc, 1);
							if (sj == 0) {
								return a.id - b.id;
							} else {
								return sj;
							}
						}
					} else {
						return a.id - b.id;
					}
				});
				let ChargeCarPcs = await this.$z.request("/ChargeCarPcs", {
					pcs: user.pcs,
				});
				let list = StationPid.concat(ChargeCarPcs);
				this.list = list;
				this.reqdata = list;
				this.$refs.getdatascrollview.onRefresh();
			},
			async getdata(reqdata) {
				let list = this.list.slice(reqdata.csta, reqdata.csta + reqdata.cmax);
				let pcslist = list.filter((e) => {
					return !e.gtel && !e.ChargeCarPcs;
				});
				let SituationTJreq = {
					sum: pcslist.length,
				};
				pcslist.forEach((e, i) => {
					SituationTJreq[`pcs${i + 1}`] = e.id;
				});
				if (pcslist.length != 0) {
					let SituationTJ = await this.$z.request(
						"/SituationTJ",
						SituationTJreq
					);
					let SituationTJoption = {};
					SituationTJ.forEach((e) => {
						SituationTJoption[e.pcs] = e;
					});
					list.forEach((e) => {
						if (SituationTJoption[e.id]) {
							e.ChargeCarPcs = SituationTJoption[e.id];
						}
					});
				}
				return list;
			},
			async searchchange() {
				if (this.searchstr == "") {
					this.list = this.reqdata;
					this.$refs.getdatascrollview.onRefresh();
					return;
				}
				let StationPid = await this.$z.request("/StationPid", {
					pcs: this.searchstr,
				});
				this.list = StationPid;
				this.$refs.getdatascrollview.onRefresh();
			},
		},
	};
</script>

<style>
	page {
		background: #efeff4;
	}
</style>
<style lang="scss">
	.Stationaddbtn {
		margin: 20rpx;
		background: #fff;
		height: 88rpx;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.iconfont {
			margin-right: 8rpx;
		}
	}

	.SituationTJbox {
		background: #ffffff;
		margin-bottom: 20px;
	}

	.SituationTJbox .title {
		font-size: 18px;
		padding: 12px 10px;
	}

	.SituationTJbox .list {
		display: flex;
		justify-content: space-between;
		text-align: center;
		padding: 0 40px 14px 40px;
	}

	.SituationTJbox .list .item {
		width: 0;
		flex: 1;
		position: relative;
	}

	.SituationTJbox .list .item::before {
		content: "";
		width: 1px;
		background: #aaaaaa;
		height: 16px;
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
	}

	.nobefore::before {
		display: none;
	}

	.SituationTJbox .list .item .value {
		color: #2095f5;
		font-size: 14px;
		line-height: 1;
	}

	.SituationTJbox .list .item .label {
		color: #aaaaaa;
		font-size: 14px;
		line-height: 1;
		padding-top: 14px;
	}

	.stationPage {
		display: flex;
		flex-direction: column;
		height: 100vh;

		.scrollview {
			height: 0;
			flex: 1;
		}
	}
</style>